<template>
  <div class="list">
    <div
      v-for="(list ,curstatus,index) in todoList"
      :key="index"
    >
      <Item
        :curstatus="curstatus"
        :list="list"
      />
    </div>
  </div>
</template>

<script>
import Item from './Item'
import { useTodoList } from '@/hooks'
import { onBeforeMount, onMounted, watch } from 'vue'
export default {
  name: 'TodoList',
  components: {
    Item
  },
  setup () {
    const { todoList, initList } = useTodoList()
    onBeforeMount(() => {
      initList()
    })
    return {
      todoList
    }
  }
}

</script>

<style scoped>
.list {
  width: 90vw;
  margin: 10px auto;
  box-shadow: 1px 1px 10px;
  border-radius: 20px;
  overflow: hidden;
}
</style>
